<template>
  <!-- 选择会员信息 -->
  <a-modal
    v-model:open="visible"
    width="800px"
    title="选择会员"
    :footer="null"
    :maskClosable="false"
  >
    <div v-global-loading="modalloading">
      <a-form :model="pageSet" layout="inline">
        <a-form-item label="会员名称  ">
          <a-input
            v-model:value="pageSet.name"
            style="width: 170px"
            :allowClear="true"
          ></a-input>
        </a-form-item>
        <a-form-item label="会员手机号">
          <a-input
            v-model:value="pageSet.phone"
            style="width: 170px"
            :allowClear="true"
          ></a-input>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-warning" @click="loadPagination(true)">
            查询
          </div>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-primary" @click="reset">重置</div>
        </a-form-item>
      </a-form>
      <a-table
        size="small"
        :loading="tableLoading"
        :dataSource="tableData"
        :columns="columns"
        bordered
        :preserveSelectedRowKeys="true"
        :pagination="false"
        row-key="id"
        :row-selection="{
          selectedRowKeys: selectedRowKeysList,
          onChange: onSelectChange,
          preserveSelectedRowKeys: true,
          type: 'radio'
        }"
        :scroll="{x: 700, y: 500}"
      ></a-table>
      <Pagination
        :pageSet="pageSet"
        style="margin-top: 10px"
        :loadPagination="loadPagination"
      ></Pagination>
      <div style="display: flex; justify-content: end">
        <a-button style="margin-right: 14px" @click="addFormData(1)"
          >取消</a-button
        >
        <a-button type="primary" @click="addFormData(2)">确定</a-button>
      </div>
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
import {ref, computed} from "vue";
import {membersInfoPage} from "@/api/customerArchives/memberManagement";
import Pagination from "@/components/pagination/Pagination.vue";
import {message, Modal} from "ant-design-vue";
const visible = ref<boolean>(false);
const modalloading = ref<boolean>(false);
const tableData = ref<Array<any>>([]);
const tableLoading = ref<boolean>(false);
const emits = defineEmits(["ok"]);
//重置
const reset = (): void => {
  pageSet.value = {
    pageNo: 1,
    pageSize: 20,
    total: 0
  };
  loadPagination(true);
};
const selectedRowKeysList = ref<Array<any>>([]);
const formData = ref({});
function onSelectChange(selectedRowKeys, data) {
  selectedRowKeysList.value = selectedRowKeys;
  formData.value = {
    memberId: data[0].id,
    memberName: data[0].name
  };
}
const columns = ref<Array<any>>([
  {
    title: "序号",
    dataIndex: "name",
    align: "center",
    width: 50,
    customRender: ({index}) => {
      return index + 1;
    },
    fixed: "left"
  },
  {
    title: "会员名称",
    dataIndex: "name",
    align: "center",
    width: 250
  },
  {
    title: "会员手机号",
    dataIndex: "phone",
    align: "center",
    width: 100
  }
]);
const addFormData = (type: number) => {
  if (type == 1) {
    visible.value = false;
  } else {
    if (selectedRowKeysList.value.length <= 0) {
      message.error("请选择会员信息！");
    } else {
      emits("ok", formData.value);
      nodeModal();
    }
  }
};
const pageSet = ref<any>({
  pageNo: 1,
  pageSize: 20,
  total: 0
});
const loadPagination = (flag: boolean = false): void => {
  if (flag) {
    pageSet.value = {
      pageNo: 1,
      pageSize: 20,
      total: 0
    };
  }
  tableLoading.value = true;
  membersInfoPage(pageSet.value)
    .then((res) => {
      tableData.value = res.data.rows;
      pageSet.value.total = res.data.totalRows;
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
loadPagination();
const showModal = (data: any) => {
  selectedRowKeysList.value = [data.memberId];
  formData.value = {
    memberId: data.memberId,
    memberName: data.memberName
  };
  reset();
  visible.value = true;
};
const nodeModal = () => {
  visible.value = false;
};
defineExpose({
  showModal,
  nodeModal,
  modalloading
});
</script>
<style lang="less" scoped></style>
